<template>
	<view  style="background: #FAFAFA;">
		
			<view class="bj">
				<view class="bj1">
					<view style="margin-top: 88upx;" ><u-icon name="arrow-left" color="#FFFFFF" size="24" @click="gotoBack()"></u-icon></view>
					<view class="bj2">酒店</view>
				</view>
				<view class="t1">
					<view class="t2">
						<view @click="jd=false" :class="jd==false?'pand':''" style="border-top-left-radius: 16upx;">酒店/公寓</view>
						<view @click="jd=true" :class="jd==true?'pand':''" style="border-top-right-radius: 16upx;">人才公寓</view>
					</view>
					<view class="t3">
						<view class="t4">{{addressInfo.city}}</view>
						<view class="t5"  @click="goMap(1)">
							<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/address.png"></image>
							<view>当前位置</view>
						</view>
					</view>
					<view class="t6">
						<view class="t7" style="margin-left: 28upx;">
							<view class="t8">入住</view>
							<view class="t9">03月04日</view>
						</view>
						<view class="t10">至</view>
						<view class="t7">
							<view class="t8">离店</view>
							<view class="t9">03月05日</view>
						</view>
						<view class="t11">共1晚</view>
					</view>
					<view class="t12">
						<view class="t13">关键字/位置/品牌/酒店名</view>
						<view class="t14">价格/等级</view>
					</view>
					<view class="t15" @click="gosearch(2)">查询</view>
				</view>
			</view>
			
			
			
			<view class="t16">
				<view class="t17">推荐人才公寓</view>
				<view class="t18" @click="xiangq()">
					<view class="t20">
						<view class="t19">
							<view class="t21">5</view>
							<view class="t22"><text>五星</text></view>
						</view>
						<view class="t23">
							<view class="t24">
								<view class="t25">波恩(广州新白云机场国际店)</view>
								<view class="t26">剩余2间房</view>
							</view>
							<view class="t27">
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
							</view>
							<view class="t28">
								<view class="t29">4.7分</view>
								<view class="t30">506条评论</view>
								<view class="t31">1.0万收藏</view>
							</view>
							<view class="t32">
								<view>免费停车</view>
								<view>接机服务</view>
								<view>行李寄存</view>
							</view>
							<view class="t33">
								<view class="t34">距您15KM-白云国家机场</view>
								<view class="t35">
									<view class="t36">￥356</view>
									<view class="t37">￥229<text>起</text></view>
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="t20">
						<view class="t19">
							<view class="t21">5</view>
							<view class="t22"><text>五星</text></view>
						</view>
						<view class="t23">
							<view class="t24">
								<view class="t25">波恩(广州新白云机场国际店)</view>
								<view class="t26">剩余2间房</view>
							</view>
							<view class="t27">
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
							</view>
							<view class="t28">
								<view class="t29">4.7分</view>
								<view class="t30">506条评论</view>
								<view class="t31">1.0万收藏</view>
							</view>
							<view class="t32">
								<view>免费停车</view>
								<view>接机服务</view>
								<view>行李寄存</view>
							</view>
							<view class="t33">
								<view class="t34">距您15KM-白云国家机场</view>
								<view class="t35">
									<view class="t36">￥356</view>
									<view class="t37">￥229<text>起</text></view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="t20">
						<view class="t19">
							<view class="t21">5</view>
							<view class="t22"><text>五星</text></view>
						</view>
						<view class="t23">
							<view class="t24">
								<view class="t25">波恩(广州新白云机场国际店)</view>
								<view class="t26">剩余2间房</view>
							</view>
							<view class="t27">
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
							</view>
							<view class="t28">
								<view class="t29">4.7分</view>
								<view class="t30">506条评论</view>
								<view class="t31">1.0万收藏</view>
							</view>
							<view class="t32">
								<view>免费停车</view>
								<view>接机服务</view>
								<view>行李寄存</view>
							</view>
							<view class="t33">
								<view class="t34">距您15KM-白云国家机场</view>
								<view class="t35">
									<view class="t36">￥356</view>
									<view class="t37">￥229<text>起</text></view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="t20">
						<view class="t19">
							<view class="t21">5</view>
							<view class="t22"><text>五星</text></view>
						</view>
						<view class="t23">
							<view class="t24">
								<view class="t25">波恩(广州新白云机场国际店)</view>
								<view class="t26">剩余2间房</view>
							</view>
							<view class="t27">
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/37.png"></image>
							</view>
							<view class="t28">
								<view class="t29">4.7分</view>
								<view class="t30">506条评论</view>
								<view class="t31">1.0万收藏</view>
							</view>
							<view class="t32">
								<view>免费停车</view>
								<view>接机服务</view>
								<view>行李寄存</view>
							</view>
							<view class="t33">
								<view class="t34">距您15KM-白云国家机场</view>
								<view class="t35">
									<view class="t36">￥356</view>
									<view class="t37">￥229<text>起</text></view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
		
		
		
		
	</view>
</template>

<script>
	// 引入腾讯地图jssdk文件
	import  QQMapWX from "@/static/js/qqmap-wx-jssdk.min.js"
	import  calendar from '@/components/date-picker/date-picker.vue'//时间选择	
	import uniPopup from '@/components/uni-popups/uni-popup.vue';
	import {mapState,mapGetters} from 'vuex';//位置授权
	export default {
		components: {			
			 calendar,uniPopup
		},
		computed: {
			...mapState(["addressInfo"]),
			...mapGetters(['isLocation'])
		},
		data() {
			return {
				jd:false,
				topBarHeight: 0, //状态栏加导航栏高度
				stateBarHeight: 0, //导航栏高度
				tabBarHeight: 50, //状态栏高度
				//顶部数据
				navbarData:{
					title:'酒店',
					src:''
				},
				className: '',
				btnnum: '',
				address: {
					hotel: '昆明',					
				},
				showCaledar: false,
				dateStr: '',
				daysCount: 130,	
				startTime:'',//开始时间
				endTime:'',//结束时间
				dayCount:'',//住宿时间
				weekstart:'',//周几开始
				weekend:'',//周几结束
				//列表
				hotelData:[],
				//价格
				list: [{
						selected: false,
						title: '150元以下',
						minPrice: "0",
						maxPrice: "150"
					},
					{
						selected: false,
						title: '150-300元以下',
						minPrice: "150",
						maxPrice: "300"
					},
					{
						selected: false,
						title: '300-450元以下',
						minPrice: "300",
						maxPrice: "450"
					},
					{
						selected: false,
						title: '450-600元以下',
						minPrice: "450",
						maxPrice: "600"
					},
					{
						selected: false,
						title: '600-1000元以下',
						minPrice: "600",
						maxPrice: "1000"
					}, {
						selected: false,
						title: '1000元以上',
						minPrice: "1000",
						maxPrice: ""
					},
				],
				imgSrc :'xinx.png',
				 //定义前端选中的值
				selectList:"",
				selectId: [],
				// 搜索条件
				searchObj:{
					keyWord: '',
					minPrice: '',
					maxPrice: '',
					priceRangeStr: '',
					hotelSubStar: ''
				},
				showStr: '',
				starIndex: 0
			}
		},
		watch:{
			addressInfo:{
				handler(newVal) {
					this.getHotelSubList()
				},
				deep: true
			}
			
		},
		onLoad(option) {
			this.btnnum = option.type			
			this.startTime = this.$refs.initStartDate.choiceDate[0].re
			this.endTime = this.$refs.initStartDate.choiceDate[1].re
			this.weekstart = this.$refs.initStartDate.choiceDate[0].week
			this.weekend = this.$refs.initStartDate.choiceDate[1].week
			this.dayCount = this.$refs.initStartDate.dayCount
			if(this.isLocation){
				this.$store.dispatch('getCity')//获取当前位置
			}else{
				var _this = this
				uni.showModal({
					title: '提示',
					content: '注意：请允许获取您的地理位置，否则部分功能不能使用！',
					success: function(res) {
						if (res.confirm) {
							uni.openSetting({
							  success: function (dataAu) {							   
							   if (dataAu.authSetting["scope.userLocation"] == true) {				  						    
								 let qqmapsdk = new QQMapWX({
								  	// 填写自己的Key值，这个值是与AppID绑定的
								  	key: _this.$mConfig.qqMapWxKey
								  });
							      //再次授权，调用wx.getLocation的API
							       uni.getLocation({
							              type: "wgs84",
							              success: (res) => {				  						               
										   // 逆地址解析方法
										   qqmapsdk.reverseGeocoder({
										   	location: {
										   		latitude: res.latitude,
										   		longitude: res.longitude
										   	},
										   	success(res) {
												_this.addressInfo.city = res.result.address
												_this.addressInfo.lat = res.result.location.lat
												_this.addressInfo.lng = res.result.location.lng
										   	},
										   	fail(res) {
										   		console.log("逆地址解析失败")
										   		
										   	}
										   })
							              },
							              fail(err) {
							                //授权失败后，调用，可以在这儿调用下面的例子 再次进行授权
							                console.log(err, "eee");
							                uni.showToast({
							                  title: "授权未通过",
							                  icon: "none",
							                });
							                that.openAuthSetting();
							              },
							            });
							    } else {
							      uni.showToast({ title: "授权失败", icon: "none" });
							    }
							  },
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		//导航
		mounted: function() {
			var self = this;
			uni.getSystemInfo({
				success: function(res) {
					self.stateBarHeight = res.statusBarHeight
					// #ifdef MP-WEIXIN
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					let paddingSize = menuButtonInfo.top - self.stateBarHeight
					self.tabBarHeight = (menuButtonInfo.bottom - self.stateBarHeight) + paddingSize
					self.topBarHeight = menuButtonInfo.bottom + paddingSize
					// #endif
					
					// #ifdef APP-NVUE || APP-PLUS 
					let menuRect = wx.getMenuButtonBoundingClientRect()
					self.topBarHeight = menuRect.top + menuRect.height
					// #endif
					
				},
			})
			//选择的城市
			uni.$on('updateData',(data) => {
				this.addressInfo.city = data.city
			})
		},
		onPageScroll(e){
			if(e.scrollTop>277){//277是需要固定的地方到顶部的距离
				this.className = 'sfixed';
			}else{
				this.className = '';
			}
		},
		methods:{
			xiangq(){
				uni.navigateTo({
					url:'/pages/hotel/details'
				})
			},
			//顶部返回
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 选择星级
			chooseStar(index) {
				this.starIndex = index;
				this.searchObj.hotelSubStar = index 
			},
			// 关闭弹窗
			closePopup() {
				this.$refs.popup.close()
				this.showStr = ""
				// TODO 品牌
				this.searchObj = {
					keyWord: '', //关键词 酒店名称和标签      
					minPrice: '', //最低价格
					maxPrice: '', //最高价格
					priceRangeStr: '', //星数显示
					hotelSubStar: '' //星数
				}
				this.starIndex = 0
				this.list.forEach(i=>i.selected = false)
			},
			// 完成
			confirm() {
				this.$refs.popup.close()
				this.showStr = this.searchObj.priceRangeStr + " " + (this.searchObj.hotelSubStar + "星")
			},
			//获取酒店列表		
			async getHotelSubList() {
				let param = {
					pageNum: 1,
					pageSize: 100, 
					status: 0,
					hotelSubCity: this.addressInfo.city
				};
				let res = await this.$apis.getHotelSubList(param);
				if (res) {						 
					for(var i=0;i<res.rows.length;i++){
						res.rows[i].hotelImgPath= res.rows[i].hotelImgPath.split(",");//逗号是分隔符
					}
					this.hotelData=res.rows
				}
			},
			//切换
			changeTab(e) {
				this.btnnum = e
			},
			//酒店公寓时间选择			
			change2({ choiceDate, dayCount }) {					
				//参数解释//1.choiceDate 时间区间（开始时间和结束时间）//2.dayCount 共多少晚
				this.startTime = choiceDate[0].re
				this.endTime = choiceDate[1].re
				this.weekstart = choiceDate[0].week
				this.weekend = choiceDate[1].week			
				this.dayCount = dayCount				
			},
			//选择城市
			Selectcity(){
				uni.navigateTo({
					url:'search-city'
				})
			},
			//价格等级
			peicrGrade(){
				this.$refs.popup.open();
			},
			//酒店去主页
			toHomepage(type,id){
				uni.navigateTo({
					url:'/pages/hotel/hotel-homepage?hotelSubId='+id+"&startTime="+this.startTime+"&endTime=" 
					+ this.endTime+"&dayCount=" + this.dayCount+"&weekstart=" 
					+ this.weekstart+"&weekend=" + this.weekend+"&type=" + type
					
				})
			},			
			//搜索
			gosearch(type){	
				console.log("searchObj", this.searchObj)
				console.log(this.btnnum)
				var that = this			
				if(type == 2){
					uni.navigateTo({
						url:'/pages/hotel/search-personnel?startTime='+this.startTime+"&endTime=" + this.endTime+"&dayCount=" + this.dayCount+"&weekstart=" + this.weekstart+"&weekend=" + this.weekend+'&type='+type+'&searchObj='+encodeURIComponent(JSON.stringify(this.searchObj))
					})
				} else{
					uni.navigateTo({
						url:'/pages/hotel/search-hotel?startTime='+this.startTime+"&endTime=" + this.endTime+"&dayCount=" + this.dayCount+"&weekstart=" + this.weekstart+"&weekend=" + this.weekend+'&type='+type+'&searchObj='+encodeURIComponent(JSON.stringify(this.searchObj)) 
					})
				}
				
			},
			//选择按钮
			choice(index) {
				this.list.forEach(item => item.selected = false)
				this.list[index].selected = true;
				this.searchObj.priceRangeStr = this.list[index].title
				this.searchObj.minPrice = this.list[index].minPrice
				this.searchObj.maxPrice = this.list[index].maxPrice
				console.log("this.searchObj",this.searchObj)
			},
			// 
			//打开位置选择
			goMap(type){
				var that = this;
				if(type == 1){
					uni.navigateTo({
						url:'/pages/home_sub/city'
					})
				}else{
					uni.navigateTo({
						url:'/pages/home_sub/city'
					})
				}
				
			},
			//图片配置域名
			getImgUrl(icon){
			   return this.$mConfig.imgSrcUrl+icon;
			},
		}
	}
</script>

<style lang="scss" scoped>	
	.pand{
		background:  #84C0F4!important;
		color: #fff!important;
	}
	.qj{
		
		height: 100%;
		width: 100%;
		
	}
	.t16{
		margin-top: 324upx;
		margin-left: 32upx;
		.t17{
			font-size: 30upx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}
		.t18{
			display: flex;
			    flex-wrap: wrap;
			.t20{
				
				display: flex;
				border-bottom: 2upx solid #F6F6F6;
				padding-bottom: 38upx;
				margin-top: 32upx;
				.t19{
					background: url('https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/bj.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 168upx;
					height: 218upx;
					border-radius: 8upx;
					position: relative;
					.t21{
						width: 33upx;
						height: 31upx;
						background: #000000;
						opacity: 0.5;
						font-size: 20upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 31upx;
						float: right;
					}
					.t22{
						
						width: 75upx;
						height: 43upx;
						position: absolute;
						bottom: 0;
						background: rgba(0, 0, 0, 0.4);
						border-radius: 0px 0px 0px 12upx;
						text-align: center;
						line-height: 43upx;
						text{
							font-size: 22upx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 600;
							color: #F9E75D!important;
						}
					}
				}
				.t23{
					margin-left: 20upx;
					.t24{
						display: flex;
						.t25{
							font-size: 28upx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
						.t26{
							font-size: 22upx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #EC7571;
							margin-left: 34upx;
						}
					}
					.t27{
						display: flex;
						margin-top: 16upx;
						image{
							width: 35upx;
							height: 33upx;
							margin-right: 12upx;
						}
					}
					.t28{
						display: flex;
						margin-top: 16upx;
						.t29{
							font-size: 20upx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #84C0F4;
							margin-right: 34upx;
						}
						.t30{
							font-size: 26upx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-right: 24upx;
						}
						.t31{
							font-size: 26upx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
					.t32{
						display: flex;
						margin-top: 16upx;
						view{
							width: 118upx;
							height: 36upx;
							background: rgba(132,192,244,0.1216);
							text-align: center;
							font-size: 20upx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #5C9DD6;
							margin-right: 8upx;
							line-height: 36upx;
						}
					}
					.t33{
						display: flex;
						margin-top: 14upx;
						.t34{
							font-size: 24upx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
						.t35{
							display: flex;
							align-items: center;
							.t36{
								font-size: 24upx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #999999;
								margin-left: 64upx;
							}
							.t37{
								font-size: 32upx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 600;
								color: #DF5353;
								
								text{
									font-size: 24upx;
									font-family: Source Han Sans CN-Medium, Source Han Sans CN;
									font-weight: 500;
									color: #999999;
								}
							}
						}
					}
				}
			}
			
		}
		
	}
	.bj{
		background-image: url('https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/bj.png');
		
		background-size: 100% 100%;
		
		width: 100%;
		height:452upx;
		position: relative;
		.t1{
			position: absolute;
			
			width: 686upx;
			height: 550upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin-left: 34upx;
			margin-top: 28upx;
			.t2{
				
				display: flex;
				view{
					width: 344upx;
					height: 82upx;
					background: #fff;
					color: #000;
					font-size: 30upx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 600;
					line-height: 82upx;
					text-align: center;
					
				}
			}
			.t3{
				margin-left: 30upx;
				margin-top: 24upx;
				padding-right: 30upx;
				display: flex;
				justify-content: space-between;
				.t4{
					font-size: 26upx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
				.t5{
					display: flex;
					align-items: center;
					image{
						width: 40upx;
						height: 40upx;
						margin-right: 16upx;
					}
					view{
						font-size: 26upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.t6{
				margin-top: 36upx;
				display: flex;
				.t7{
					
					
					.t8{
						font-size: 28upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
					.t9{
						font-size: 32upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
				.t10{
					font-size: 24upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					margin-left: 94upx;
					margin-right: 90upx;
					margin-top: 40upx;
				}
				.t11{
					font-size: 24upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-top: 40upx;
					margin-left: 84upx;
				}
			}
			.t12{
				margin-left: 28upx;
				margin-top: 42upx;
				.t13{
					font-size: 26upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}
				.t14{
					font-size: 26upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					margin-top: 32upx;
				}
			}
			.t15{
				margin-left: 48upx;
				margin-top: 40upx;
				width: 592upx;
				height: 80upx;
				background: #84C0F4;
				font-size: 32upx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80upx;
				text-align: center;
			}
		}
		.bj1{
			height: 178upx;
			padding-left: 34upx;
			display: flex;
			align-items: center;
			.bj2{
				font-size: 34upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 290upx;
				margin-top: 88upx;
			}
		}
		
	}
.hotel-content{
	position: absolute;
	z-index: 2;
	top:280rpx;
	.choose {
		border: 1px solid #5C9DD6;
	}
	
	.hotel-1{
		width: 686rpx;
		height: 524rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.tabbox{
			.tab-nav{
				height: 82rpx;
				line-height: 82rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				width: 100%;
				overflow: hidden;
				.tab-nav-item{
					width: 50%;
					text-align: center;
					font-size: 30rpx;
					color: #000;
					background-color: #fff;
				}
				.tab-nav-item.tabactive {
					background-color: #84C0F4;
					color: #fff;
											
				}
				
			}
		}
		.tab-panel-item{
			padding: 0 28rpx;
			display: none;
			.hot-m{
				height: 80rpx;
				line-height: 80rpx;
				.icon-location{
					width: 26rpx;
					height: 30rpx;
					margin-left: 10rpx;				
				}
			}
			.checkinout {
				height: 100rpx;
				position: relative;					
				display: -webkit-box;
				display: flex;
				background-color: #fff;					
				.firstSelect{
					.Date_lr {
						width: 50%;
						text-align: left;
						line-height: 40rpx;
						font-size: 32rpx;
						color: #333;
						input{
							color: #333;
							font-size: 32rpx;
						}
					}
					.lin-122{
						line-height: 122rpx;
					}
					.calendar-days {
						position: absolute;
						top: 63%;
						left: 40%;
						transform: translate(-50%, -50%);
						font-size: 28rpx;
						color: #666;
						padding: 4rpx 16rpx;
						line-height: 40rpx;
						background-color: #fff;
					}
				}
			}
			.search-one{
				padding:8rpx 0;
				input{
					font-size: 26rpx;
					color: #666;
				}
			}
		}
		.dis{
				display: block;
			}   
		.flex-button-box {
			padding: 20rpx 15rpx;
			.flex-button-btn {
				text-align: center;
				position: relative;
				border: none;
				pointer-events: auto;
				width: 100%;
				display: block;
				font-size: 38rpx;
				line-height: 80rpx;
				background-color: #84C0F4;
				color: #fff;					
				height: 80rpx;
				outline: none;
			}
		}
	}
	.recommend-main{
		margin-top: 46rpx;
		.recomd-list{
			display: none;
			.s-c-item{
				border-bottom: 1px solid #eaeaea;
				padding: 30rpx 0;
				.s-c-img{
					width:168rpx;
					height:218rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					overflow: hidden;
					position: relative;
					image{
						width: 100%;
					}
					.t-j{
						position: absolute;
						top: 0;
						right: 0;
						width:35rpx;
						height: 30rpx;
						background: #0000006b;
						line-height: 30rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
					}
					.pin-j{
						position: absolute;
						bottom: 0;
						left: 0;
						width:74rpx;
						height: 44rpx;
						background: #0000006b;
						border-radius: 0px 0px 0px 12rpx;
						font-size: 24rpx;
						color: #F9E75D;
						line-height: 44rpx;
						text-align: center;
					}
				}
				.grade-content{
					margin-left: 20rpx;
					.fc-ec{
						color: #EC7571;
					}
					.stars{
						margin: 10rpx 0;
						image{
							width: 30rpx;
							height: 28rpx;
							display: inline-block;
							margin: 0 5rpx;
						}
					}
					.pression{
						margin: 10rpx 0;
						text{
							padding-right: 35rpx;
						}
					}
					.tags-wap{
						margin: 15rpx 0;
					}
					.tags{
						width: 118rpx;
						height:36rpx;
						background: #F0F8FE;
						margin-right: 26rpx;
						text-align: center;
						line-height: 36rpx;
						color: #5C9DD6;
					}
					.prices{
						.yx{
							text-decoration: line-through;
						}					
					}
				}
			}
		}
		.dis{
			display: block;
		}
	}
}
.mask-content{
	height: 50vh;
	max-height: 50vh;
	overflow-y: auto;
	.button-blank {
		display: inline-block;
		width: 45%;
		height: 70upx;
		text-align: center;
		border-radius: 10upx;
		line-height: 70upx;
		background: #ffffff;
		border: 1px solid #999999;
	}
	
	.button-solid {
		display: inline-block;
		width: 45%;
		height: 70upx;
		text-align: center;
		border-radius: 10upx;
		line-height: 70upx;
		background-color: $main-color;
		border: 1px solid $main-color;
		color: #ffffff;
	}
	
	.p-g-content{
		margin: 25rpx 4%;
		.price-t{
			margin: 16rpx 10rpx;
			line-height: 60rpx;
			text-align: center;
			background: #f3f3f3;
			padding: 0 10rpx;
			&.selde {
				background: #5C9DD6;
				color: #fff;
			}
		}
		.stars{
			margin: 10rpx 30rpx;
			image{
				width: 30rpx;
				height: 28rpx;
				display: inline-block;
				margin: 0 5rpx;
			}
			&.choose {
				background-color: #8eceec;
			}
		}
	}
}
</style>
